<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title th:text="#{contests} + ' - Online Judge'"></title>
    <meta http-equiv="keywords" content="ACM,OJ,OnlineJudge,JAVA,C++,HappyOJ,IDE,在线判题系统,在线IDE">
    <meta http-equiv="description" content="Topic of Online Judge System for ACM">
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            OnlineJudge.countdown();
        });
    </script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar"> 	 <!-- class="content-with-sidebar" -->
            <div id="nav-content" >
                <a th:href="@{/contests}" class="current">[[#{contests}]]</a>
            </div>
            <div class="roundbox">
                <div class="roundbox-title ">
                    [[#{runningorpendingcontests}]]
                </div>
                <table class="contest rtable contest_local_upcoming">
                    <tr class="header">
                        <th class="title left-item">[[#{contesttitle}]]</th>
                        <th class="start">[[#{starttime}]]</th>
                        <th class="during">[[#{during}]]</th>
                        <th class="info" >[[#{contest.status}]]</th>
                        <th class="reg">[[#{contest.registration}]]</th>
                    </tr>
                    <tr th:if="${unfinshContest.size == 0}"><td class="left-item dark" colspan="15" style="text-align: left;">There is no records.</td></tr>
                    <tr th:each="contest,stat : ${unfinshContest.list}" th:class="${stat.odd}?'dark'">
                        <td class="title left-item" th:if="${contest.status != 'RUNNING'}" th:text="${contest.title}" ></td>
                        <td class="title left-item" th:if="${contest.status == 'RUNNING'}">
                            <span th:text="${contest.title}"></span><br/>
                            <span style="font-size:10px;">
                                <span th:if="${session.session_username != null}">
                                    <span th:if="${contest.isRegister == 'Y'}">
                                        <a th:href="@{/contest/{contestId}(contestId=${contest.contest_id})}">[[#{contest.enter}]] &raquo;</a>
                                    </span>
                                    <span th:if="${contest.isRegister != 'Y'}">
                                        <span style="font-size:10px;color:grey" th:if="${contest.regStatus == 'ENDED'}">[[#{contest.tip_miss_the_contest_reg}]]</span>
                                        <span style="font-size:10px;color:grey" th:if="${contest.regStatus != 'ENDED'}">[[#{contest.tip_must_register_first}]]</span>
                                    </span>
                                </span>
                                <span th:if="${session.session_username == null}" style="color:grey">[[#{contest.tip_must_register_first}]]</span>
                            </span>
                        </td>
                        <td class="start" th:text="${#dates.format(contest.start_time,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td class="during" th:text="${contest.during}"></td>
                        <td class="info" th:title="'From ' + ${#dates.format(contest.start_time,'yyyy-MM-dd HH:mm:ss')} + ' to ' + ${#dates.format(contest.end_time,'yyyy-MM-dd HH:mm:ss')}">
                            <span th:if="${contest.status == 'PENDING'}">
                                [[#{contest.status_before_start}]]&nbsp;<span style="color:grey" class="countdown"><span th:title="${contest.leftTime}" th:text="${contest.friendlyLeftTime}"></span></span>
                            </span>
                            <span th:if="${contest.status == 'RUNNING'}">
                                <span style=""><b><a th:href="@{/contest/{contestId}/standings(contestId=${contest.contest_id})}">[[#{contest.current_standing}]]</a></b></span><br/>
		            			[[#{contest.util_close}]]&nbsp;<span style="color:grey" class="countdown"><span th:title="${contest.leftTime}" th:text="${contest.friendlyLeftTime}"></span></span>
                            </span>
                            <span th:if="${contest.status == 'ENDED'}" style="color:grey;"><b>[[#{contest.status_end}]]</b></span>
                        </td>
                        <td class="reg" th:title="'From ' + ${#dates.format(contest.start_reg,'yyyy-MM-dd HH:mm:ss')} + ' to ' + ${#dates.format(contest.end_reg,'yyyy-MM-dd HH:mm:ss')}">
                            <span class="link-to-contest" style="">
                                <span th:if="${contest.regStatus == 'ENDED'}">
                                    <a th:href="@{/contest/{contestId}/registrants(contestId=${contest.contest_id})}" title="The num of registrants" th:text="${contest.registrants}"></a><br/>
                                    <font style="color:grey"><s:text name="contest.reg_end"/></font>
                                </span>
                                <span th:if="${contest.regStatus == 'PENDING'}">
                                    [[#{contest.reg_before_start}]]&nbsp;<span style="font-size:10px;color:grey" class="countdown"><span th:title="${contest.regleftTime}" th:text="${contest.friendlyRegleftTime}"></span></span>
                                </span>
                                <span th:if="${contest.regStatus == 'RUNNING'}">
                                    <span th:if="${session.session_username != null}">
                                        <span th:if="${contest.isRegister == 'Y'}">
                                            <b><font style="color: red">[[#{contest.reg_success}]]</font></b>
                                        </span>
                                         <span th:if="${contest.isRegister != 'Y'}">
                                             <b><a th:href="@{/contest/{contestId}/register(contestId=${contest.contest_id})}" th:class="'reg ' + ${contest.contest_id}">[[#{contest.reg_contest}]]&raquo;</a></b>
                                        </span>
                                    </span>
                                    <span th:if="${session.session_username == null}">
                                        <b><a th:href="@{/contest/{contestId}/register(contestId=${contest.contest_id})}" class="reg">[[#{contest.reg_contest}]]&raquo;</a></b>
                                    </span>
                                    <a th:href="@{/contest/{contestId}/registrants(contestId=${contest.contest_id})}"  title="The num of registrants" th:text="${contest.registrants}"></a>
                                    <br/>
			            			[[#{contest.util_close}]] &nbsp;<span style="color:grey;" class="countdown"><span th:title="${contest.regleftTime}" th:text="${contest.friendlyRegleftTime}"></span></span>
                                </span>
                            </span>
                        </td>
                    </tr>
                </table>
            </div>
            <br>
            <!-- other-oj  -->
            <div class="roundbox">
                <div class="roundbox-title ">
                    <span>[[#{recent-contest}]]</span>
                    <a href="/data/otheroj.json" class="recent-contest-update">
                    [[#{recent-contest-update}]] <span class="otheroj_create_time"></span>
                    </a>
                </div>
                <div>
                    <table class="contest rtable contest_upcoming" id="contest_body">
                        <tr class='header'><th class='oj left-item'>OJ</th><th class='name '>[[#{contesttitle}]]</th>
                            <th class='start' th:text="#{starttime} + '(UTC+8)'"></th>
                            <th class='week'>Week</th>
                            <th class='access'>Access</th></tr>
                        <tr><td class='left-item dark' colspan='15' style='text-align: left;'>Loading...</td></tr>
                    </table>
                </div>
                <script type="text/javascript">
                    $(document).ready(function() {
                        var contest_html = "<tr class='header'><th class='oj left-item'>OJ</th><th class='name '>[[#{contesttitle}]]</th>"+
                        "<th class='start'>[[#{starttime}]](UTC+8)</th>"+
                        "<th class='week'>Week</th>"+
                        "<th class='access'>Access</th></tr>";
                        $.getJSON('data/otheroj.json',function(data){
                            $('.otheroj_create_time').html(OnlineJudge.timeFormatSeconds(data.createDate) + " UTC+8");
                            contests = data.contests;
                            if(data.size == 0){
                                contest_html = "<tr><td class='left-item dark' colspan='15' style='text-align: left;'>There is no records.</td></tr>";
                            }else{
                                $.each(contests, function(i,item){
                                    contest_html +="<tr ";
                                    if(i%2==0){
                                        contest_html += "class='dark'";
                                    }
                                    contest_html +=">";
                                    contest_html +="<td class='oj left-item'>"
                                        + "<img class='small-oj-brand' src='/img/otheroj/favicon_" + item.oj.toLowerCase() + ".png' title='"
                                        +  item.oj + "'/></td>";
                                    contest_html +="<td class='name'><a href='"+ item.link +"' target='_blank'>"+ item.name +"</a></td>";
                                    contest_html +="<td class='start'>"+ item.start_time +"</td>";
                                    contest_html +="<td class='week'>"+ item.week +"</td>";
                                    contest_html +="<td class='access'>"+ item.access +"</td>";
                                    contest_html +="</tr>";
                                });
                            }
                            $('#contest_body').html(contest_html);
                        });
                    });
                </script>
            </div>
            <br>
            <!-- Ended  -->
            <div class="roundbox">
                <div class="roundbox-title ">
                    [[#{endedcontests}]]
                </div>
                <div>
                    <table class="contest rtable">
                        <tr class="header">
                            <th class="title left-item">[[#{contesttitle}]]</th>
                            <th class="start">[[#{starttime}]]</th>
                            <th class="during">[[#{during}]]</th>
                            <th class="standings">[[#{standings}]]</th>
                            <th class="registrants" title="The num of registrants">=</th>
                        </tr>
                        <tr th:if="${pageInfo.size == 0}"><td class="left-item dark" colspan="15" style="text-align: left;">There is no records.</td></tr>
                        <tr th:each="contest,stat : ${pageInfo.list}" th:class="${stat.odd}?'dark'">
                            <td class="title left-item">
                                <a th:href="@{/contest/{contestId}(contestId=${contest.contest_id})}" th:text="${contest.title}"></a>
                            </td>
                            <td class="start" th:text="${#dates.format(contest.start_time,'yyyy-MM-dd HH:mm:ss')}"></td>
                            <td class="during"
                                th:title="${#dates.format(contest.start_time,'yyyy-MM-dd HH:mm:ss')} + ' ' + ${#dates.format(contest.end_time,'yyyy-MM-dd HH:mm:ss')}"
                                th:text="${contest.during}">
                            </td>
                            <td class="standings"><a th:href="@{/contest/{contestId}/standings(contestId=${contest.contest_id})}">[[#{contest.final_standing}]]</a> </td>
                            <td class="registrants"><a th:href="@{/contest/{contestId}/registrants(contestId=${contest.contest_id})}" th:text="${contest.attendList.size}"></a></td>
                        </tr>
                    </table>
                    <div style="margin:6px 12px;font-size:15px;">
                        <div class="left"></div>
                        <div class="right">
                            <a th:if="${pageInfo.hasPreviousPage == true}" th:href="@{/contests/page/{pageNum}(pageNum=${pageInfo.prePage})}" style="color:#000;text-decoration: none;">&larr;</a>
                            <a th:if="${pageInfo.firstPage > 1}" th:href="@{/contests/page/1}" style="color:#000;text-decoration: none;">1</a>
                            <span th:if="${pageInfo.firstPage > 2}"  >...</span>
                            <span th:each="nav:${pageInfo.navigatepageNums}">
                                <a th:href="@{/contests/page/{pageNum}(pageNum=${nav})}" th:text="${nav}" th:if="${nav == pageInfo.pageNum}" style="font-weight: bold;color:#000;text-decoration: none;"></a>
                                <a th:href="@{/contests/page/{pageNum}(pageNum=${nav})}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}" style="color:#000;text-decoration: none;"></a>
                            </span>
                            <span th:if="${pageInfo.lastPage < pageInfo.pages}" >...</span>
                            <a th:if="${pageInfo.pages > pageInfo.lastPage}" th:href="@{/contests/page/{pageNum}(pageNum=${pageInfo.pages})}" th:text="${pageInfo.pages}" style="color:#000;text-decoration: none;"></a>
                            <a th:if="${pageInfo.hasNextPage == true}" th:href="@{/contests/page/{pageNum}(pageNum=${pageInfo.nextPage})}" style="color:#000;text-decoration: none;">&rarr;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
</body>
</html>
